<template>
  <div>
    <h2>上传六级题目图片</h2>
    <p>请选择图片文件进行上传，可一次性上传多个文件。支持的格式有：jpg、jpeg、png、bmp、gif。</p>

    <div class="box">
      <el-upload
        class="upload-demo"
        drag
        action
        :before-upload="beforeUpload"
        :on-success="onSuccess"
        :on-exceed="onExceed"
        :file-list="fileList"
        :headers="headers"
        :http-request="uploadFile"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将图片文件拖到此处，或
          <em>点击上传</em>
        </div>
      </el-upload>
      
          <el-radio-group v-model="answer">
            <el-radio label="A">A</el-radio>
            <el-radio label="B">B</el-radio>
            <el-radio label="C">C</el-radio>
            <el-radio label="D">D</el-radio>
          </el-radio-group>
    
    </div>

    <p>
      <el-button type="info" size="small" icon="el-icon-info" circle></el-button>
      如有问题，请联系客服获取帮助。
    </p>

      <!-- 悬停提示框 -->
      <el-tooltip class="qrcode-tooltip" effect="dark" content="扫码添加客服微信" >
        <div class="qrcode-box">
          <img src="@/assets/find.jpg" alt="客服二维码" class="qrcode-img">
        </div>
      </el-tooltip>


  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: 'UploadCET6',
    data() {
      return {
        answer:'A',
        uploadUrl: 'http://127.0.0.1:8084/upload', // 上传图片的接口地址
        fileList: [], // 已上传的文件列表
        headers: {'Content-Type': 'multipart/form-data'}, // 指定请求头为multipart/form-data，用于上传文件
      };
    },
    methods: {
      // 上传图片前的校验，返回false可阻止上传
      beforeUpload(file) {
        console.log(file)
        // 这里可以根据文件的类型、大小等属性进行判断，若不满足条件，返回false即可
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/bmp' || file.type === 'image/gif';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG/PNG/BMP/GIF 格式!');
          return false;
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
          return false;
        }
      },
      // 上传成功的回调函数
      onSuccess(response, file, fileList) {
        this.fileList = fileList;
        console.log('上传成功：', response);
      },
      // 文件超出数量或大小限制时的回调函数
      onExceed(files, fileList) {
        console.log('文件超出数量或大小限制', files, fileList);
        this.$message.warning('上传图片个数不能超过 10 张!');
      },
      uploadFile(item){
	    let FormDatas = new FormData()
        let blob = new Blob([item.file], { type: "image/png, image/jpeg"});
        FormDatas.append('file',blob);
        FormDatas.append('answer',this.answer);
	    axios({
		    method: 'post',
		    url: 'http://127.0.0.1:8084/upload',
		    headers:{'Content-Type': 'multipart/form-data'},
		    timeout: 30000,
		    data: FormDatas
		}).then(res=>{
			if(res.data==="success"){
                alert("上传成功");
            }
            else{
                alert("上传失败");
            }
		})
        }
    },
  };
</script>

<style>
  .box {
    width: 1200px;
    margin: 20px auto;
    padding: 20px 20px 20px 20px;
    border: 1px solid #eee;
    border-radius: 10px;
  }

  .box p {
    margin: 20px 0;
    font-size: 14px;
  }

  .box p el-button {
    margin-right: 10px;
  }

  .qrcode-target {
    position: relative;
  }

  .qrcode-tooltip {
    
    bottom: 100px;
    right: 300px;
  }

  .qrcode-box {
    padding: 8px;
  }

  .qrcode-img {
    
    width: 180px;
    height: 180px;
  }
</style>

